<template>
  <div class="wrapper">
    <swiper :options="swiperOption" v-if="showSwiper">
      <!-- slides -->
      <swiper-slide v-for="item of list" :key="item.id">
        <img class="swiper-img" :src="item.imgUrl" alt="">
      </swiper-slide>
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>
<!--data:function(){}  ES5写法-->
<script>
export default{
  name: 'HomeSwiper',
  props: {
    list: Array
  },
  data () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination',
        loop: true
      }
    }
  },
  computed: {
    showSwiper () {
      return this.list.length
    }
  }
}

</script>
<style lang="stylus" scoped>
  .wrapper  >>> .swiper-pagination-bullet-active
    background:#fff!important
  .wrapper  >>> .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal >  .swiper-pagination-bullets
    bottom: 20px;
  .wrapper
    overflow :hidden           //设置宽高比必需
    width :100%                //设置宽高比必需
    height: 0                  //设置宽高比必需
    padding-bottom :26.67%     //设置宽高比必需
    background : #cdcdcd
    .swiper-img
       width:100%
</style>
